<template>
  <div class="binary-search-tree-line" :style="lineStyle">
    <div class="arrows"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { INode } from "@/interface"
export default defineComponent({
  props: {
    node: Object as PropType<INode>
  },
  setup(props) {

    // 只做一次初始化, 后面的变化让dom来操作, 这里不要写成computed 会有问题
    const lineStyle = {
      height: `${props.node?.isLeft ? props.node?.leftLine : props.node?.rightLine}px`,
      transform: `rotateZ(${props.node?.isLeft ? props.node?.leftAngle : props.node?.rightAngle}deg)`
    };


    return { lineStyle };
  },
});
</script>

<style scoped>
.binary-search-tree-line {
  width: 1px;
  background-color: #02273a;
  position: relative;
  transform-origin: top left;
  z-index: -2;
}
.arrows {
  border: 4px solid ;
  border-color: transparent #02273a #02273a transparent;
  position: absolute;
  bottom: 0;
  left: -3.5px;
  transform: rotateZ(50deg);
}
</style>